<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>	
<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8">
        <title>用户注册页面</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- CSS -->
        <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=PT+Sans:400,700'>
        <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Oleo+Script:400,700'>
        <link rel="stylesheet" href="${pageContext.request.contextPath }/css/bootstrap.min.css">
        <link rel="stylesheet" href="${pageContext.request.contextPath }/css/registerStyle.css">

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

    </head>

    <body>

        <div class="header">
            <div class="container">
                <div class="row">
                    <div class="logo span4">
                        <h1><a href="">user Register <span class="red">.</span></a></h1>
                    </div>
                    <div class="links span8">
                        <a class="home" href="" rel="tooltip" data-placement="bottom" data-original-title="Home"></a>
                        <a class="blog" href="" rel="tooltip" data-placement="bottom" data-original-title="Blog"></a>
                    </div>
                </div>
            </div>
        </div>

        <div class="register-container container">
            <div class="row">
                <div class="iphone span5">
                    <img src="${pageContext.request.contextPath }/images/iphone.png" alt="">
                </div>
                <div class="register span6">
                    <form action="${pageContext.request.contextPath }/UserController?op=register" id="regForm" method="post" enctype="multipart/form-data">                   
                        <h2>欢迎注册 <span class="red"><strong></strong><a href="login.jsp" style="font-size: 12px;margin-left: 20px;">已有账号？去登录</a></span></h2>
                        
                                                
                        <!-- <label for="uname"></label> -->
                        <input type="text" id="userName" name="userName" placeholder="请设置用户名...">
                        <label id="userNameId" style="color: red;"></label>
                        
                        <!-- <label for="upwd"></label> -->
                        <input type="password" id="userPwd" name="userPwd" placeholder="请输入密码...">
                        <label id="userPwdId"  style="color: red;"></label>
                        
                        <!-- <label for="repwd"></label> -->
                        <input type="password" id="userRePwd" name="userRePwd" placeholder="请再次确认密码...">  
                        <label id="userRePwdId" style="color: red;"></label>                     
                          
                        <!-- <label for="utel"></label> -->
                        <input type="text" id="utel" name="utel" placeholder="请输入手机号...">
                        <label id="utelId" style="color: red;"></label>
                        
                        <!-- <label for="ucheck"><a href="">获取验证码</a></label> -->
                        <label for="ucheck">验证码&nbsp;&nbsp;&nbsp;&nbsp;<img id="checkCode" src="../UserController?op=createCode"></label>
                        <input type="text" id="ucheck" name="ucheck" placeholder="请输入验证码..."  style="float: left;"> 
                        <label id="ucheckId" style="color: red;"></label>                                                     		  

                        <label for="uimg">上传头像</label>
                        <input type="file" id="uimg" name="uimg" value="浏览">
                        <label id="umigId"></label> 
                                                             
                        <label for="usex" style="float: left;margin-top: 14px;">性&nbsp;&nbsp;&nbsp;别</label>
                        <div style="width:160px;margin-top: 22px;"><!-- border: 1px red solid; -->
                      		 <input type="radio" id="man" name="sex" value="男" checked="checked" style="width: 15px;height: 15px;"/>&nbsp;男&nbsp;&nbsp;
                       		 <input type="radio" id="woman" name="sex" value="女" style="width: 15px;height: 15px;"/>&nbsp;女<br>    
                        </div> 
                       <label id="usexId"></label>  
                                            
                       <button type="submit">注册</button>
                       
                    </form>
                </div>
            </div>
        </div>
		<div align="center">Copyright &copy; 2020.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/"></a>
</div>
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
        <!-- Javascript -->
    <script src="${pageContext.request.contextPath }/js/jquery-1.8.2.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/jquery.backstretch.min.js"></script>
    <script src="../js/scripts.js"></script>
  	<!-- <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> -->
  	<script type="text/javascript">
  		
	   $(function(){
	  		  //失去焦点时触发
	  		 $("#userName").blur(function(){
	  			 //判断用户名是否为空
	    		   if( $("#userName").val().trim()==""){
	    			   
	    			  $("#userNameId").text("用户名不能为空");
	    			  
	    		   }else{
	    			   $.post("${pageContext.request.contextPath }/UserController",{uname: $("#userName").val(),op:"checkName"},function(data){
	    				   //把返回来的数据显示在提示标签上
	    				   $("#userNameId").html(data);     				   
	    			   })	    			   
	    		   }
	  		 });
	  		 //判断密码  >6 不能包含空格
 	  		 $("#userPwd").blur(function(){
	  			  if( $("#userPwd").val().trim().length>=6  &&  $("#userPwd").val().trim().indexOf(" ")== -1){
	  				  $("#userPwdId").html("<font color='green'>正确</font>");
	  			  }else{
	  				 $("#userPwdId").html("<font color='red'>密码长度大于6,不能包含空格<font color='red'>");
	  			  }
	  		 });
 	  		 //验证确认密码
 	  		  $("#userRePwd").blur(function(){
 	  			 var upwd=$("#userPwd").val();
 	  			 var uprewd=$("#userRePwd").val();
 	  			 if(upwd==uprewd){
 	  				 $("#userRePwdId").html("<font color='green'>两次密码一致</font>");
 	  			 }else{
 	  				$("#userRePwdId").html("<font color='red'>两次密码不一致</font>"); 
 	  			 }
 	  		  });  
 	  		 //判断手机号  ==11   不能包含空格	  		 
	  		 $("#utel").blur(function(){
	  			  if( $("#utel").val().trim().length==11  &&  $("#utel").val().trim().indexOf(" ")== -1){
	  				  $("#utelId").html("<font color='green'>正确</font>");
	  			  }else{
	  				 $("#utelId").html("<font color='red'>手机号长度为11位,不能包含空格</font>");
	  			  }
	  		 });
	  		  //验证码
 	  		 $("#ucheck").blur(function(){
	  			 //判断用户名是否为空
	    		   if( $("#ucheck").val().trim()==""){
	    			   
	    			  $("#ucheckId").html("<font color='red'>验证码不能为空</font>");
	    			  
	    		   }else{
	    			   $.post("${pageContext.request.contextPath }/UserController",{checkNum: $("#ucheck").val(),op:"checkCode"},function(data){
	    				   //把返回来的数据显示在提示标签上
	    				   $("#ucheckId").html(data);     				   
	    			   })	    			   
	    		   } 
	  		 }); 
	  		  //最终的提交表单
	  		  $("#regForm").submit(function(){
	  			  if( $("#userNameId").text()=="可用" &&  $("#userPwdId").text()=="正确" &&  $("#userRePwdId").text()=="两次密码一致" && $("#utelId").text()=="正确"){
	  				  return true;
	  			  }
	  			  return false;
	  		  })
   		  
	   })
  		
			/*
				验证码分析：
					点击超链接或者图片，需要换一张
					1.给超链接和图片取绑定点击事件
					2.重新设置图片的src值
			
			*/
			window.onload=function(){
				//获取图片对象
				var img=document.getElementById("checkCode");
				//绑定单击事件
				img.onclick=function(){
					
					//加时间戳
					var date=new Date().getTime();
					img.src="../UserController?op=createCode&?"+date;  //时间戳永不重复
				}
				
			}
	 	
  	
  	</script>
  	
</html>